<template>
  <div>
    <!-- 导航栏 -->
    <van-nav-bar
      @click-left="$router.go(-1)"
      :title="$route.meta.name"
      left-arrow
    />
    <!-- 登录之后的个人中心 -->
    <div v-if="userInfo" class="userInfo">
      <div>
        <van-image
          round
          width="1.6rem"
          height="1.6rem"
          src="http://adc.skt5.top/img/13"
        />
      </div>
      <van-cell>
        {{ userInfo.nickname }}
      </van-cell>
      <div>
        <van-button @click="logout" type="danger">溜了溜了</van-button>
      </div>
    </div>
    <!-- 未登录的个人中心 -->
    <div v-else class="userInfo">
      <div>
        <van-image
          round
          width="1.6rem"
          height="1.6rem"
          src="http://adc.skt5.top/img/12"
        />
      </div>
      <van-cell>
        大韭菜
      </van-cell>
      <div>
        <van-button @click="$router.push('/login')" type="primary"
          >韭菜快登录</van-button
        >
      </div>
    </div>
    <van-cell title="地址管理" icon="location-o" is-link />
    <van-cell title="我的钱包" icon="cash-on-deliver" is-link />
    <van-cell title="我的二维码" icon="qr-invalid" is-link />
    <van-cell title="我的小伙伴" icon="friends-o" is-link />
  </div>
</template>

<script>
export default {
  data() {
    return {
      userInfo: {},
    };
  },
  mounted() {
    //通过对存储的判断，然后渲染不同内容展示
    this.userInfo = sessionStorage.getItem("user")
      ? JSON.parse(sessionStorage.getItem("user"))
      : null;
  },
  methods: {
    //封装一个退出事件
    logout() {
      //退出 清空存储信息
      sessionStorage.removeItem("user");
      location.reload();
    },
  },
};
</script>

<style scoped>
.userInfo {
  text-align: center;
}
/* 样式穿透*/
.van-cell__value--alone {
  text-align: center;
  
}
.van-image{
margin-top: .5rem;
}
</style>
